<template>
  <div class="nav">
    <div class="matterPC">
      <div class="header">
        <div class="left" @click="logoMet">
          <img src="../../assets/common/logo.png" alt="">
        </div>
        <div class="right">
          <div
            class="title"
            v-for="(item, index) in navigationList"
            :key="index"
            :class="{'title-active': index == navigationActive}"
            @click="navigationHit(index, item)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navigationList: this.$store.state.navigationList,
      navigationActive: localStorage.getItem('stateActive')
    };
  },
  methods: {
    logoMet() {
      this.$router.push({
        path: '/'
      })
    },
    navigationHit(index, item) {
      this.navigationActive = index

      this.$router.push({
        path: item.path
      })
    },
    navbarAppHit(index) {
      this.navigationActive = index
    }
  }
};
</script>

<style lang="less" scoped>
.nav {
  .matterPC {
    .header {
      height: 70px;
      background: rgba(211, 211, 211, 0.8);
      padding: 0 150px 0 50px;
      box-sizing: border-box;
      width: 100%;
      position: fixed;
      z-index: 10;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        width: 100px;
        height: 50px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .right {
        display: flex;
        align-items: center;
        .title {
          font-size: 16px;
          font-weight: 500;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 .5rem;
          box-sizing: border-box;
          margin-right: 5px;
          cursor: pointer;
          border-radius: 2px;
          letter-spacing: 0.5px;
          transition: .3s;
        }

        .title:last-child {
          margin-right: 0;
        }

        .title-active {
          color: #fff;
          background: #276cd3;
        }

        .title:hover {
          color: #fff;
          background: #276cd3;
        }
      }
    }
  }
}
</style>